<template>
  <span>
    <el-button type="primary" @click="exportExcel">{{text}}</el-button>
  </span>
</template>
<script>
  export default {
    props:{
      text:{ //按钮名称
        type: String,
        default: '导出'
      },
      /** fields格式 key为要显示的列内容，value为对应的字段名称
       * fields:{
       *  '登录名': 'loginname',
       *  '用户名': 'username',
       *  '手机号': 'phone'
       * }
       **/
      fields:{ //需要导出的数据和对应的字段
        type: Object,
        default: () => {return {}}
      },
      search:{ //筛选条件
        type: Object,
        default: () => {return {}}
      },
      page:{//页数信息
        type: Object,
        default: () => {return {}}
      },
      filename:{ //导出文件名
        type: String,
        default: '导出列表'
      },
      fetchList:{ //查询列表的接口方法
        type: Function,
        default() {
          return []
        }
      }
    },
    data(){
      return{
        listData: []
      }
    },
    methods:{
      exportExcel(){
        this.$confirm("确定导出当前列表数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '正在加载列表数据',
            background: 'rgba(255, 255, 255, 0.6)'
          });
          require.ensure([], () => {

            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = Object.values(this.fields); //对应表格输出的title
            const filterVal = Object.keys(this.fields); // 对应表格输出的数据
            let timestamp = new Date().getTime();

            this.getList(1).then(res => {
              const exceldata = this.formatJson(filterVal, res);
              export_json_to_excel(tHeader, exceldata, `${this.filename}${timestamp}`);  //对应下载文件的名字
              loading.close();
              this.$message.success('导出成功')
            })
            // this.fetchList(Object.assign(param, this.search)).then((response) => {
            //   const exceldata = this.formatJson(filterVal, response.data.data.records);
            //   export_json_to_excel(tHeader, exceldata, `${this.filename}${timestamp}`);  //对应下载文件的名字
            // })
          })
        }).catch(() =>{});
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          return v[j]
        }))
      },
      getList(page){
        let param = {
          current : page,
          size : 500,
        }
        return new Promise(resolve => {
          this.fetchList(Object.assign(param, this.search)).then((response) => {
            let resList = response.data.data
            this.listData = [...this.listData, ...resList.records]
            if (resList.pages > 1 && resList.current < resList.pages){
              setTimeout((res) => {
                resolve (this.getList(page+1))
              },100)

            }else{
              resolve (this.listData)
            }
          })
        })
      },
    }
  }
</script>
